<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#main {
				width: 300px;
				/* height: 100px; */
				/* line-height: 100px; */
				text-align: center;
				margin: 40px auto;
				/* border: 1px solid black; */
				font-size: 20px;

			}

			button {
				width: 160px;
				height: 40px;
			}
		</style>
	</head>
	<body bgcolor="#f3f3f3">
		<div id="main">
			
			<img src="../点名器/students/陈家祥.jpg" alt="" style="width: 300px;height: 400px;">
			
			<p style="margin-top: 5px;margin-bottom: 10px;">陈家祥</p>

			<button type="button" onclick="start()"> 开始</button>

		</div>


		<script>
			var main = document.getElementById("main");
			var names = [
				"陈家祥", "陈文杰", "陈逸", "翟坤", "丁辰浩", "丁韩伟", "董凯", "黄威", "蒋慎斌", "孔晶伟",
				"李亚洲", "刘璐璐", "刘涛", "马晓波", "潘彬", "庞皓元", "汤郭靖", "汤舒青", "万旭光", "汪志伟", "王海波",
				"吴三九", "徐子孝", "杨俊杰", "叶树松", "张畅畅", "赵云峰", "郑定国", "周宗意", "朱学峰"
			];

			var imgs = [
				"../点名器/students/陈家祥.jpg", "../点名器/students/陈文杰.jpg", "../点名器/students/陈逸.jpg",
				"../点名器/students/翟坤.png", "../点名器/students/丁辰浩.png", "../点名器/students/丁韩伟.jpg",
				"../点名器/students/董凯.png", "../点名器/students/黄威.jpg", "../点名器/students/蒋慎斌.jpg",
				"../点名器/students/孔晶伟.jpg", "../点名器/students/李亚洲.jpg", "../点名器/students/刘璐璐.png",
				"../点名器/students/刘涛.png", "../点名器/students/马晓波.jpg", "../点名器/students/潘彬.png",
				"../点名器/students/庞皓元.png", "../点名器/students/汤郭靖.jpg", "../点名器/students/汤舒青.jpg",
				"../点名器/students/万旭光.jpg", "../点名器/students/汪志伟.png", "../点名器/students/王海波.jpg",
				"../点名器/students/吴三九.jpg", "../点名器/students/徐子孝.jpg", "../点名器/students/杨俊杰.jpg",
				"../点名器/students/叶树松.jpg", "../点名器/students/张畅畅.png", "../点名器/students/赵云峰.jpg",
				"../点名器/students/郑定国.jpg", "../点名器/students/周宗意.jpg", "../点名器/students/朱学峰.jpg"

			];
			//声明计时器1
			var timer1;
			//声明定时器2
			var timer2;
			//定义的随机数
			var n;
			//定义倒计时开始的数字
			var start_num;

			function start() {
				start_num=4;
				timer2=window.setInterval(function(){
					main.children[2].innerHTML=start_num+"秒后停止";
					start_num--;
				},1000);
				window.clearInterval(timer1);
				timer1 = window.setInterval(function() {
					n = suiji();
					// main.innerHTML 
					main.children[0].src = imgs[n];
					main.children[1].innerHTML = names[n];

				}, 100);
			
				setTimeout(function() {
					window.clearInterval(timer1);
					window.clearInterval(timer2);
					names.splice(n, 1);
					imgs.splice(n, 1);
					main.children[2].innerHTML="开始";
					console.log(names);
				}, 5000);

			}
			//产生0-25的随机数
			function suiji() {
				return parseInt(Math.random() * names.length);
			}
		</script>
	</body>
</html>
